//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Datagrid Default

   Default Mendix Datagrid Widget. The datagrid shows a list of objects in a grid
========================================================================== */

.mx-datagrid {
    table {
        border-width: 0;
        background-color: transparent;
        /* Table header */
        th {
            border-style: solid;
            border-color: $grid-border-color;
            border-top-width: 0;
            border-right: 0;
            border-bottom-width: 1px;
            border-left: 0;
            background-color: $grid-bg-header;
            padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
            vertical-align: middle;
            .mx-datagrid-head-caption {
                white-space: normal;
            }
        }
        /* Table Body */
        tbody tr {
            td {
                @include transition();
                padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
                vertical-align: middle;
                border-width: 0;
                border-color: $grid-border-color;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                background-color: $grid-bg;
                &:focus {
                    outline: none;
                }
                /* Text without spaces */
                .mx-datagrid-data-wrapper {
                    text-overflow: ellipsis;
                }
            }
            &.selected td,
            &.selected:hover td {
                color: $grid-selected-color;
                background-color: $grid-bg-selected !important;
            }
        }
        /* Table Footer */
        tfoot {
            > tr > th {
                padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
                border-width: 0;
                background-color: $grid-footer-bg;
            }
            > tr > td {
                padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
                border-width: 0;
                background-color: $grid-bg;
                font-weight: $font-weight-bold;
            }
        }
        & *:focus {
            outline: 0;
        }
    }
}